<script>
  import BorderChinese from '@/pages/chineseSurname/components/components/borderChinese.vue';
  import sheep from '@/sheep';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';
  import { h5_url } from '@/sheep/config';

  export default {
    data() {
      return {
        showShareGuide: false,
      };
    },
    name: 'surnameContent',
    components: { MpHtml, BorderChinese },
    props: {
      founder: {
        type: Object,
        default: {},
      },
      scrollInfoView: {
        type: String,
        default: '',
      },
      headerHeight: {
        type: Number,
        default: 0,
      },
    },
    computed: {
      sheep() {
        return sheep;
      },
      sq_image_path() {
        return sheep.$store('AI').sq_image_path;
      },
      mp_code() {
        return sheep.$store('AI').mp_code;
      },
      version() {
        return sheep.$store('AI').version;
      },
      appVersion() {
        return sheep.$store('app').info.worship_version;
      },

    },
    mounted() {

    },
    methods: {
      contentScroll(e) {
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this);
          query.select('#surnameComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 0,
              });
            }
          }).exec();
          query.select('#originComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 1,
              });
            }
          }).exec();
          query.select('#transferComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 2,
              });
            }
          }).exec();
          query.select('#countyComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 3,
              });
            }
          }).exec();
          query.select('#coupletComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 4,
              });
            }
          }).exec();
          query.select('#allusionComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 5,
              });
            }
          }).exec();
          query.select('#family_traditionComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 6,
              });
            }
          }).exec();
          query.select('#ancestral_hallComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 7,
              });
            }
          }).exec();
          query.select('#generationComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 8,
              });
            }
          }).exec();
          query.select('#genealogyComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 9,
              });
            }
          }).exec();
          query.select('#celebrityComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 10,
              });
            }
          }).exec();
          query.select('#claninsigniaComponents').boundingClientRect((res) => {
            if (!!res && !!res.top) {
              uni.$emit('allTop', {
                top: res.top,
                index: 11,
              });
            }
          }).exec();
        });
        uni.$emit('contentScroll');
      },
      goXINHUA(id) {
        if (this.mp_code == this.appVersion) {
          return;
        }
        sheep.$router.go('/pages/chineseSurname/ancestorWorship', { id: id });
      },
      ancestorLikes() {
        this.$emit('ancestorLikes');
      },
      // #ifdef H5
      shareAll() {
        this.showShareGuide = true;
      },
      closePopup() {
        this.showShareGuide = false;
      },
      // #endif
      // #ifdef APP-PLUS
      shareAll() {
        sheep.$platform.share.shareAPP({
          desc: `${this.founder.surname}姓始祖`,
          title: `${this.founder.surname}姓始祖`,
          link: `pages/chineseSurname/details_firstAncestor?id=${this.founder.id}`,
          image: `${h5_url}/static/fenxiang_icon.png`,
        });
      },
      // #endif

    },
  };
</script>

<template>
  <scroll-view scroll-y class="surnameOrigin_scrollBottom allColumnCenter" :style="{
      height:`calc(100vh - ${ headerHeight }px)`
    }" :scroll-into-view="scrollInfoView" @scroll="contentScroll">
    <view class="wh_750 flex flex-column align-center">
      <view id="surnameComponents" class="hW_30"></view>
      <border-chinese :show-header="true" :title="`${founder.surname}姓始祖`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="hW_80"></view>
                <view class="mrZhongWu_founder flex ss-m-t-10">
                  <view class="mrZhongWu_founder_left flex flex-column align-center" @click="goXINHUA(founder.id)">
                    <view class="mrZhongWu_founder_left_icon" v-if="!!founder.image_input">
                      <image class="mrZhongWu_founder_left_image" :src="founder.image_input"></image>
                    </view>
                    <view class="mrZhongWu_founder_left_floralOfferings flex align-center justify-center ss-m-t-25">
                      <text class="mrZhongWu_founder_left_floralOfferings_text">献花</text>
                    </view>
                  </view>
                  <view class="mrZhongWu_founder_right" style="margin-left: 67rpx;">
                    <view class="mrZhongWu_founder_right_name">
                      <text class="mrZhongWu_founder_right_name_text">{{ founder.ancestors || '待考' }}</text>
                    </view>
                    <view class="hW_20"></view>
                    <view class="mrZhongWu_founder_right_tips">
                      <text class="mrZhongWu_founder_right_tips_text">
                        百家姓排名 {{ founder.ranking && founder.ranking > 0 ? `第${founder.ranking}名` : '未知' }}
                      </text>
                    </view>
                    <view class="hW_20"></view>
                    <view class="mrZhongWu_founder_right_statistics">
                      <text class="mrZhongWu_founder_right_statistics_text">全球总人口
                        {{ founder.population ? founder.population : '未知' }}
                      </text>
                    </view>
                    <view class="mrZhongWu_founder_right_line" style="margin-top: 23rpx;"></view>
                    <view class="mrZhongWu_founder_right_lineSecond" style="margin-top: 4rpx;"></view>
                    <view class="hW_20"></view>
                    <view class="mrZhongWu_founder_right_operation flex align-center justify-around"
                          style="margin-top: 32rpx;">
                      <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                            style="position: relative" @click.stop="ancestorLikes">
                        <image class="mrZhongWu_founder_right_operation_list_image"
                               :src="founder.is_like == 1 ? `${sq_image_path}/chineseSurname/sq_thumbsUp_select.png`:`${sq_image_path}/chineseSurname/sq_thumbsUp.png`"
                        ></image>
                        <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                          点赞{{ founder.likes || 0 }}
                        </text>
                        <!--                        <image :src="`${IMG_URL}dianzan_gif.gif`" v-if="showGif" class="gif"></image>-->
                      </view>
                      <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                            @click="goXINHUA(founder.id)">
                        <image class="mrZhongWu_founder_right_operation_list_image"
                               :src="`${sq_image_path}/chineseSurname/sq_comments.png`"></image>
                        <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                          评论{{ founder.comment || 0 }}
                        </text>
                      </view>
                      <!-- #ifdef MP-WEIXIN -->
                      <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                            style="position: relative">
                        <image class="mrZhongWu_founder_right_operation_list_image"
                               :src="`${sq_image_path}/chineseSurname/sq_share.png`"></image>
                        <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">分享</text>
                        <button open-type="share" :data-surname="founder.surname"
                                style="position: absolute;top: 0;left: 50%;transform: translateX(-50%);height: 75rpx;opacity: 0"></button>
                      </view>
                      <!-- #endif -->
                      <!-- #ifndef MP-WEIXIN -->
                      <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                            style="position: relative"
                            @click.stop="shareAll"
                      >
                        <image class="mrZhongWu_founder_right_operation_list_image"
                               :src="`${sq_image_path}/chineseSurname/sq_share.png`"></image>
                        <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">分享</text>
                      </view>
                      <!-- #endif -->
                    </view>
                  </view>
                </view>
                <view class="hW_30"></view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="originComponents" v-if="!!founder.origin" class="hW_45"></view>
      <border-chinese v-if="!!founder.origin" :show-header="true" :title="`${founder.surname}姓起源`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.origin"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="transferComponents" v-if="!!founder.transfer" class="hW_45"></view>
      <border-chinese v-if="!!founder.transfer" :show-header="true" :title="`迁徙分布`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.transfer"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="countyComponents" v-if="!!founder.county" class="hW_45"></view>
      <border-chinese v-if="!!founder.county" :show-header="true" :title="`郡望堂号`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.county"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="coupletComponents" v-if="!!founder.couplet" class="hW_45"></view>
      <border-chinese v-if="!!founder.couplet" :show-header="true" :title="`宗祠对联`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.couplet"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="allusionComponents" v-if="!!founder.allusion" class="hW_45"></view>
      <border-chinese v-if="!!founder.allusion" :show-header="true" :title="`典故趣事`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.allusion"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="family_traditionComponents" v-if="!!founder.family_tradition" class="hW_45"></view>
      <border-chinese v-if="!!founder.family_tradition" :show-header="true" :title="`家风家训`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.family_tradition"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="ancestral_hallComponents" v-if="!!founder.ancestral_hall" class="hW_45"></view>
      <border-chinese v-if="!!founder.ancestral_hall" :show-header="true" :title="`祠堂分布`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.ancestral_hall"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="generationComponents" v-if="!!founder.generation" class="hW_45"></view>
      <border-chinese v-if="!!founder.generation" :show-header="true" :title="`字辈排行`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.generation"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="genealogyComponents" v-if="!!founder.genealogy" class="hW_45"></view>
      <border-chinese v-if="!!founder.genealogy" :show-header="true" :title="`家谱文献`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.genealogy"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="celebrityComponents" v-if="!!founder.celebrity" class="hW_45"></view>
      <border-chinese v-if="!!founder.celebrity" :show-header="true" :title="`${founder.surname}姓名人`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_670">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.celebrity"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view id="claninsigniaComponents" v-if="!!founder.claninsignia" class="hW_45"></view>
      <border-chinese v-if="!!founder.claninsignia" :show-header="true" :title="`${founder.surname}姓族徽`">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_662">
                  <view class="hW_80"></view>
                  <view class="origin">
                    <mp-html :content="founder.claninsignia"></mp-html>
                  </view>
                  <view class="hW_30"></view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view class="hW_45"></view>
    </view>
    <!-- #ifdef H5 -->
    <view v-if="showShareGuide"
          class="guide-wrap"
          @click.stop="closePopup"
    >
      <image
        class="guide-image"
        :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
      ></image>
    </view>
    <!-- #endif -->
  </scroll-view>
</template>

<style scoped lang="scss">

  .mrZhongWu_founder {
    width: 580rpx;

    .mrZhongWu_founder_left {
      .mrZhongWu_founder_left_icon {
        width: 216rpx;
        height: 260rpx;
        background: #A0A0A0;

        .mrZhongWu_founder_left_image {
          width: 216rpx;
          height: 260rpx;
        }
      }

      .mrZhongWu_founder_left_floralOfferings {
        width: 150rpx;
        height: 50rpx;
        background: #FF4206;
        border-radius: 50rpx 50rpx 50rpx 50rpx;

        .mrZhongWu_founder_left_floralOfferings_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }
    }

    .mrZhongWu_founder_right {
      .mrZhongWu_founder_right_name {
        .mrZhongWu_founder_right_name_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #292929;
        }
      }

      .mrZhongWu_founder_right_tips {
        .mrZhongWu_founder_right_tips_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }
      }

      .mrZhongWu_founder_right_statistics {
        .mrZhongWu_founder_right_statistics_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }
      }

      .mrZhongWu_founder_right_line {
        width: 350rpx;
        height: 2rpx;
        background: #DBB485;
        opacity: 0.5;
      }

      .mrZhongWu_founder_right_lineSecond {
        width: 350rpx;
        height: 2rpx;
        background: #DBB485;
        opacity: 0.5;
      }

      .mrZhongWu_founder_right_operation {
        .mrZhongWu_founder_right_operation_list {
          .mrZhongWu_founder_right_operation_list_image {
            width: 44rpx;
            height: 44rpx;
          }

          .mrZhongWu_founder_right_operation_list_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }

      }

      .mrZhongWu_founder_right_viewStyle {
        .mrZhongWu_founder_right_viewStyle_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }
    }
  }

  .origin {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #4B4B4B;
    line-height: 60rpx;
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>